import React from 'react';
import { View, Image } from '@tarojs/components';
import './card.scss';
import { IconFont } from '@nutui/icons-react-taro'

export interface CardProps {
  id: number;
  title: string;
  author: string;
  time: string;
  avatar: string;
  content: string;
  image?: string;
  comment: number;
  like: number;
  onClick? : () => void;
}

const Card: React.FC<CardProps> = ({ id, title, author, time, avatar, content, image, comment, like, onClick }) => {
  return (
    <View className="card" onClick={onClick}>
     <View className="card-header">
        <View className="card-avatar">
            <Image src={avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'} />
        </View>
        <View className="card-info">
          <View className="card-author">{author}</View>
          <View className="card-time">{time}</View>
        </View>
     </View>
     <View className="card-title">{title}</View>
      
      <View className="card-content">{content}</View>
      {image && (
        <View className="card-image">
          <Image src={image} mode="widthFix" />
        </View>
      )}
      <View className="card-footer">
        <View className="card-comment">
          <IconFont name="comment" />
          {comment}
        </View>
        <View className="card-like">
          <IconFont name="heart" />
          {like}
        </View>
      </View>
    </View>
  );
};

export default Card;